<template>
  <div class="login-box">
     <span class="title">注册账号</span>
    <div class="login-label">
      <span>账&nbsp;&nbsp;号:</span>
      <input type="text" placeholder="请输入账号" v-model="username">
    </div>
    <div class="login-label">
      <span>密&nbsp;&nbsp;码:</span>
      <input type="password" placeholder="请输入密码" v-model="password">
    </div>
    <div class="login-label">
      <span>确认密码:</span>
      <input type="password" placeholder="请再输入一次" v-model="password1">
    </div>
    <div class="login-label">
      <span>手机号码:</span>
      <input type="text" placeholder="11位手机号" v-model="phone">
    </div>
    <div class="login-label">
      <span>用户名:</span>
      <input type="text" placeholder="请输入用户名" v-model="uname">
    </div>
    <button type="button" class="btn" @click="register">注册</button>

  </div>
</template>

<script>
import { ljmAjax, POST } from "@/api/index";
export default {
  data() {
    return {
      username:'',
      password:'',
      password1:'',
      phone:'',
      uname:''
    };
  },
  methods:{
    register(){
      if(!this.username||!this.password||!this.uname){
        this.$message({
          message: '任何选项不能为空',
          type: 'warning'
        });
        return;
      }
      if(this.password != this.password1){
        this.$message({
          message: '两次密码输入不一样',
          type: 'warning'
        });
        return;
      }
      if(this.phone.length !=11 ){
        this.$message({
          message: '请输入11位手机号码',
          type: 'warning'
        });
        return;
      }
      const params = {
        'username':this.username,
        'password':this.password,
        'phone':this.phone,
        'uname':this.uname
      }
       POST("api/register/register", params).then(res => {
        console.log(res.data);
         this.$message({
          message: res.data.msg,
          type: 'success'
        });
        this.$router.push('/login')
      });
    }
  }
};
</script>

<style lang="scss" scoped>

.login-box {
  width: 600px;
//   height: 500px;
  display: flex;
  flex-direction: column;
  margin: 40px auto;
  align-items: center;
  border-radius: 5px;
  border:1px solid #ebeef5;
  box-shadow:  0 2px 12px 0 rgba(0,0,0,.1);
  padding: 30px 0;
  .title{
      font:400 20px/30px 'microsoft yahei';
      margin-bottom: 30px;
  }
  .login-label {
    width: 300px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    span {
      width: 110px;
    }
    input {
      width: 100%;
      outline: none;
      background: none;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 5px 10px;
      font: 400 13px/20px "microsoft yahei";
    }
  }
}
</style>